<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="emit('update:visible', $event)"
    title="类型设置"
    width="800px"
    :destroy-on-close="false"
    @close="handleClose"
    class="type-settings-dialog"
  >
    <div class="type-settings" v-if="node">
      <div class="settings-container">
        <!-- 左侧类型选择 -->
        <div class="left-panel">
          <div class="type-select">
            <el-select 
              :model-value="node.type" 
              @update:model-value="handleTypeChange"
              class="full-width"
            >
              <el-option
                v-for="type in typeConfig"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </div>
        </div>

        <!-- 右侧设置内容 -->
        <div class="right-panel">
          <!-- 通用设置 -->
          <SettingsSection
            title="通用设置"
            :settings="commonSettings"
            :node="node"
          />

          <!-- 类型特有设置 -->
          <SettingsSection
            title="类型设置"
            :settings="typeSettings[node.type] || []"
            :node="node"
          />
        </div>
      </div>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { typeConfig } from '../config/typeConfig'
import { commonSettings, typeSettings } from '../config/settingsConfig'
import { createField } from '../utils/nodeUtils'
import SettingsSection from './SettingsSection.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  node: {
    type: Object,
    required: true
  },
  originalNode: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'save', 'close'])

const handleTypeChange = (newType) => {
  if (props.node) {
    // 保存旧的通用属性
    const commonProps = {
      fieldName: props.node.fieldName,
      description: props.node.description,
      fieldDesc: props.node.fieldDesc,
      apipiost_allow_null: props.node.apipiost_allow_null,
      _isRoot: props.node._isRoot,
      _parent: props.node._parent,
      _fieldName: props.node._fieldName
    }

    // 创建新类型的默认字段
    const newField = createField(newType)

    // 清空原有属性
    Object.keys(props.node).forEach(key => {
      delete props.node[key]
    })

    // 合并新属性
    Object.assign(props.node, newField, commonProps)

    // 如果是数组或对象类型，确保有必要的属性
    if (newType === 'array' || newType === 'object') {
      if (!props.node.properties) {
        props.node.properties = {}
      }
      if (!props.node.APIPOST_ORDERS) {
        props.node.APIPOST_ORDERS = []
      }
      
      // 数组类型特殊处理
      if (newType === 'array' && !props.node.items) {
        props.node.items = {
          type: 'object',
          properties: {},
          APIPOST_ORDERS: [],
          required: []
        }
      }
    }
  }
}

const handleSave = () => {
  emit('save')
}

const handleCancel = () => {
  emit('update:visible', false)
  emit('close')
}

const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.settings-container {
  display: flex;
  gap: 24px;
}

.left-panel {
  width: 200px;
  padding: 16px;
  background-color: var(--el-bg-color-page);
  border-radius: 8px;
}

.right-panel {
  flex: 1;
}

.type-select {
  margin-bottom: 16px;
}

.full-width {
  width: 100%;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__header) {
  margin-right: 0;
  padding: 20px;
  border-bottom: 1px solid var(--el-border-color-light);
}

:deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--el-border-color-light);
}
</style> 